<template>
  <div>
    <div class="talent_video_details">
      <div class="tvd_video_look">
        <div class="tvd_look_title">
          <div class="tvd_title_box">
            <div class="tvd_line"></div>
            <div class="tvd_text">视频概览</div>
          </div>
          <div class="tvd_time">
            <RadioGroup v-model="lookTime" :radio_values="['近7天', '30天', '90天']" />
          </div>
        </div>
        <div class="tvd_look_content">
          <template v-if="!loading1">
            <div class="tvd_content_item">
              <div class="num">{{ videoData.awemeCount }}</div>
              <div class="text">视频数</div>
            </div>
            <div class="tvd_content_item">
              <div class="num">{{ LiveShop == 1 ? videoData.awemeProCount : "--" }}</div>
              <div class="text">带货视频数</div>
            </div>
            <div class="tvd_content_item">
              <div class="num">{{ videoData.favoriteCount }}</div>
              <div class="text">点赞数</div>
            </div>
          </template>
          <van-loading class="loading" v-if="loading1" type="spinner" :vertical="true" />
        </div>
      </div>
      <div class="tvd_video_data">
        <div class="tvd_look_title">
          <div class="tvd_title_box">
            <div class="tvd_line"></div>
            <div class="tvd_text">视频数据</div>
          </div>
        </div>
        <div class="tvd_check">
          <div
            :class="{ tvd_select: dataSelect == 1 }"
            class="tvd_check_item"
            @click="dataSelect = 1"
          >视频发布时间</div>
          <div
            :class="{ tvd_select: dataSelect == 2 }"
            class="tvd_check_item"
            @click="dataSelect = 2"
          >视频时长分布</div>
          <div
            :class="{ tvd_select: dataSelect == 3 }"
            class="tvd_check_item"
            @click="dataSelect = 3"
          >点赞趋势</div>
          <div
            :class="{ tvd_select: dataSelect == 4 }"
            class="tvd_check_item"
            @click="dataSelect = 4"
          >评论趋势</div>
        </div>
        <!-- 视频发布时间 -->
        <div class="tvd_echarts_box" v-if="dataSelect == 1">
          <BarChart01
            v-if="videoEdata.y.length != 0 && !loading1"
            :xData="videoEdata.x"
            :series1="videoEdata.y"
            name1="视频个数"
          />
          <van-loading
            style="padding-top:2.5rem; box-sizing:border-box"
            class="loading"
            v-if="loading1"
            type="spinner"
            :vertical="true"
          />
          <div class="tvd_no_data" v-if="!videoEdata.y.length && !loading1">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
        </div>
        <!-- 视频时长分布 -->
        <div class="tvd_echarts_box" v-if="dataSelect == 2">
          <BigPie v-if="videoPdata.length != 0 && !loading1" :valueData="videoPdata" />
          <van-loading
            style="padding-top:2.5rem; box-sizing:border-box"
            class="loading"
            v-if="loading1"
            type="spinner"
            :vertical="true"
          />
          <div class="tvd_no_data" v-if="!videoPdata.length && !loading1">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
        </div>
        <!-- 点赞趋势 -->
        <div class="tvd_echarts_box" v-if="dataSelect == 3">
          <KChart
            v-if="PraiseData.x.length != 0 && !loading2"
            :xData="PraiseData.x"
            :series1="PraiseData.y2"
            name1="新增点赞数"
          />
          <van-loading
            style="padding-top:2.5rem; box-sizing:border-box"
            class="loading"
            v-if="loading2"
            type="spinner"
            :vertical="true"
          />
          <div class="tvd_no_data" v-if="!PraiseData.x.length && !loading2">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
        </div>
        <!-- 评论趋势 -->
        <div class="tvd_echarts_box" v-if="dataSelect == 4">
          <KChart
            v-if="commentData.x.length != 0 && !loading2"
            :xData="commentData.x"
            :series1="commentData.y2"
            name1="新增评论数"
          />
          <van-loading
            style="padding-top:2.5rem; box-sizing:border-box"
            class="loading"
            v-if="loading2"
            type="spinner"
            :vertical="true"
          />
          <div class="tvd_no_data" v-if="!commentData.x.length && !loading2">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="tvd_list_title">
        <div class="tvd_look_title">
          <div class="tvd_title_box">
            <div class="tvd_line"></div>
            <div class="tvd_text">视频列表</div>
          </div>
        </div>
        <div class="checkout">
          <van-checkbox
            v-model="checkGoodsLive"
            shape="square"
            checked-color="#fd7f2c"
            icon-size=".4rem"
          >带货视频</van-checkbox>
        </div>
      </div>
      <div class="tvd_video_list">
        <div class="tvd_input_box">
          <input
            class="tvd_input"
            placeholder="请输入视频关键词搜索"
            type="text"
            @keydown.enter="searchList"
            v-model.trim="searchInput"
          />
          <img class="tvd_img" v-if="!imgBox" src="@/assets/one/seach.png" alt @click="searchList" />
          <img class="tvd_img" v-if="imgBox" src="@/assets/two/search.png" alt @click="searchList" />
        </div>
      </div>
      <!-- 直播列表 -->
      <div class="tvd_list_wrap">
        <div class="list_wrap_item" v-for="(item, index) in videoListData" :key="index">
          <div class="list_top_box">
            <div class="list_portrait_box">
              <img :src="item.thumPic" v-errorImg:video v-if="item.isDelete == 0" />
              <img class="portrait_delete" v-else src="@/assets/one/diteil6.png" alt />
              <!-- <a v-if="item.isDelete == 0" :href="item.url" target="_blank" class="picture_href"> -->
              <a v-if="item.isDelete == 0" href="javascript:void(0);" class="picture_href">
                <img src="@/assets/one/hot_video18.png" alt />
              </a>
            </div>
            <div class="list_introduce_box">
              <div class="list_introduce_top" v-if="item.isDelete == 0">
                <img
                  v-if="item.isPro == 1"
                  class="info_top-img"
                  src="@/assets/one/shopcar.png"
                  alt
                />
                {{ item.title }}
              </div>
              <div v-else class="list_delete">已删除或隐藏</div>
              <div class="list_introduce_time">发布时间: {{ item.releaseTime }}</div>
            </div>
          </div>

          <div class="list_btm_box">
            <div class="list_btm_box_item">
              <div class="num">{{ item.duration }}</div>
              <div class="text">视频时长</div>
            </div>
            <div class="list_btm_box_item">
              <div class="num">{{ item.favoriteCount }}</div>
              <div class="text">点赞数</div>
            </div>
            <div class="list_btm_box_item">
              <div class="num">{{ item.commentCount }}</div>
              <div class="text">评论数</div>
            </div>
          </div>
        </div>

        <!-- 查看更多 -->
        <!-- 列表缺省图 -->
        <div class="tvd_list_nodata" v-if="!videoListData.length && !listBottomLoading">
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>
        <!-- 列表loading -->
        <van-loading class="loading" v-if="listBottomLoading" type="spinner" :vertical="true" />
        <div class="tvd_more_box" v-if="videoListData.length">
          <div
            class="tvd_more_button"
            v-if="!listBottomLoading && !isLastPage"
            @click="lookMore"
          >查看更多</div>

          <div class="tvd_details" v-if="isLastPage">
          我是有底线的~
          </div>
        </div>
      </div>
      <div v-if="listBottomLoading" class="blank_holder"></div>
    </div>
    <div class="bott"></div>
  </div>
</template>

<script>
import RadioGroup from './EComponents/RadioGroup.vue';
import BarChart01 from './EComponents/BarChart01.vue';
import BigPie from '@/component/BigPie.vue';
import KChart from './EComponents/KChart.vue';
export default {
  components: { RadioGroup, BarChart01, BigPie, KChart },
  props: ['LiveShop'],
  data() {
    return {
      imgBox: false,
      lookTime: '30天',
      startDate: this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D'),
      endDate: this.timestamp((Date.now() / 1000) * 1, 'Y-M-D'),
      dataSelect: 1,
      checkGoodsLive: false,
      IsShop: 0, //是否是带货视频
      searchInput: '',
      PageIndex: 1,
      PageSize: 10,

      // 页面数据
      videoData: {}, // 顶部数据
      videoListData: [], //列表数据
      pageTotal: 0, //列表总条数
      videoEdata: {
        x: [],
        y: []
      },
      videoPdata: [],
      PraiseData: {
        x: [],
        y1: [],
        y2: []
      },
      commentData: {
        x: [],
        y1: [],
        y2: []
      },
      highestData: {},
      loading1: false, // 基本数据  //发布时间  //视频时长
      loading2: false,
      listLoading: false,
      showPageVip: false,
      isLastPage: false,
      listBottomLoading: false,
      name: '视频发布时间'
    };
  },
  watch: {
    lookTime: function (newVal, oldVal) {
      this.changeTime();
    },
    checkGoodsLive: function (newVal, oldVal) {
      this.PageIndex = 1;
      this.videoListData = [];
      newVal ? (this.IsShop = 1) : (this.IsShop = 0);
      this.GetVideoList();
    },
    searchInput: function (newVal, oldVal) {
      if (!newVal) {
        this.videoListData = [];
        this.GetVideoList();
        this.imgBox = false;
      } else {
        this.imgBox = true;
      }
    }
  },
  computed: {},
  created() {
    this.changeTime();
  },
  mounted() {},

  methods: {
    changeTime() {
      this.PageIndex = 1;
      this.videoListData = [];
      switch (this.lookTime) {
        case '近7天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;
        case '30天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');

          break;
        case '90天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
      }
      this.getVideoData();
      this.GetPraiseComment();
      this.GetVideoList();
    },
    // 列表查看更多事件
    lookMore() {
      this.PageIndex++;
      this.GetVideoList();
    },
    // 点击搜索
    searchList() {
      this.PageIndex = 1;
      this.videoListData = [];
      this.GetVideoList();
    },
    // 获取列表数据
    GetVideoList() {
      this.listLoading = true;
      this.isLastPage = false;
      this.listBottomLoading = true;
      this.$axios
        .post('/api/Aweme/AwemeDetailsGetPageList', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate, //时间，默认为30天
          SearchKeyWord: this.searchInput,
          IsShop: this.IsShop ? 1 : 0, //是否仅显示直播带货 1.是 其他值.显示全部
          PageIndex: this.PageIndex, //分页索引
          PageSize: this.PageSize, //分页大小
          SortOrder: 1, //排序 1 发布时间 2 视频时长 3 点赞数量 4 评论数量 5 转发数量
          SortValue: 0 //排序(0降序1升序)
        })
        .then(res => {
          this.listLoading = false;
          this.listBottomLoading = false;
          if (res.data.code == 0) {
            this.videoListData.push(...res.data.data.list);
            this.pageTotal = res.data.data.pageInfo.totalCount;
            if (this.pageTotal == this.videoListData.length) {
              this.isLastPage = true;
            }
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },

    // 基本数据  //发布时间  //视频时长
    getVideoData() {
      this.loading1 = true;
      this.videoData = {};
      this.$axios
        .post('/api/Aweme/GetAwemeOverView', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate //时间，默认为30天
        })
        .then(res => {
          this.loading1 = false;
          if (res.data.code == 0) {
            this.videoData = res.data.data;
            this.videoEdata.x = res.data.data.hx;
            this.videoEdata.y = res.data.data.hy;
            this.videoPdata = res.data.data.awemeDurationDistribution;
          }
          // if (res.data.code == 1003) {
          //   this.showPageVip = true;
          // }
        });
    },

    // 点赞趋势 , 评论趋势
    GetPraiseComment() {
      this.loading2 = true;
      this.$axios
        .post('/api/Aweme/GetAwemeFavoriteCommentTrendView', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate //时间，默认为30天
        })
        .then(res => {
          this.loading2 = false;
          if (res.data.code == 0) {
            this.PraiseData.x = res.data.data.favoriteDT; //点赞日期
            this.PraiseData.y1 = res.data.data.favoriteInc; //点赞增量
            this.PraiseData.y2 = res.data.data.favoriteC; //点赞数量
            this.commentData.x = res.data.data.commentDT; //评论日期
            this.commentData.y1 = res.data.data.commentInc; //评论增量
            this.commentData.y2 = res.data.data.commentC; //评论数量
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.bott {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}
.talent_video_details {
  padding: 0 0.4rem 0.666667rem;
  // padding-bottom: .666667rem;
}
.tvd_video_look {
  margin-top: 0.6rem;
  .tvd_look_title {
    display: flex;
    justify-content: space-between;
    .tvd_title_box {
      display: flex;
      align-items: center;
      .tvd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tvd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
  .tvd_look_content {
    display: flex;
    justify-content: space-around;
    margin-top: 0.8rem;
    margin-bottom: 0.933333rem;
    .tvd_content_item {
      width: 30%;
    }
    .num {
      text-align: center;
      font-size: 0.453333rem;
      color: #222222;
      font-family: Dinpro-medium;
    }
    .text {
      text-align: center;
      font-size: 0.32rem;
      color: #888888;
    }
  }
}
.tvd_video_data {
  .tvd_look_title {
    display: flex;
    justify-content: space-between;
    .tvd_title_box {
      display: flex;
      align-items: center;
      .tvd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tvd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
  .tvd_check {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.48rem;
    .tvd_check_item {
      padding: 0.24rem 0.266667rem;
      border-radius: 0.053333rem;
      border: solid 1px #e5e5e5;
      color: #555555;
      box-sizing: border-box;
      font-size: 0.32rem;
    }
    .tvd_select {
      background-color: #fd7f2c;
      color: #fff;
      border: none;
    }
  }
  .tvd_echarts_box {
    height: 5.4667rem;
  }
}

.tvd_list_title {
  margin-top: 0.666667rem;
  display: flex;
  justify-content: space-between;
  .tvd_look_title {
    display: flex;
    justify-content: space-between;
    .tvd_title_box {
      display: flex;
      align-items: center;
      .tvd_line {
        width: 0.08rem;
        height: 0.373333rem;
        background-color: #fd7f2c;
        border-radius: 0.04rem;
      }
      .tvd_text {
        font-size: 0.4rem;
        font-weight: 600;
        color: #222222;
        margin-left: 0.186667rem;
      }
    }
  }
  .checkout {
    /deep/.van-checkbox__label {
      font-size: 0.346667rem;
      color: #555;
      margin-top: 0.046667rem;
    }
    /deep/.van-icon {
      border-radius: 0.053333rem;
    }
  }
}

//搜索框
.tvd_video_list {
  .tvd_input_box {
    width: 100%;
    height: 0.986667rem;
    margin-top: 0.4rem;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .tvd_input {
      width: 82%;
      height: 100%;
      border: none;
      margin-left: 0.426667rem;
      font-size: 0.373333rem;
      color: #222;
    }
    .tvd_input::placeholder {
      font-size: 0.373333rem;
      color: #b5b5b5;
    }
    .tvd_img {
      width: 0.4rem;
      height: 0.4rem;
      margin-left: 0.4rem;
    }
  }
}

// 列表
.tvd_list_wrap {
  .list_wrap_item {
    margin-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
  }
  .list_top_box {
    display: flex;
    .list_portrait_box {
      width: 1.333333rem;
      height: 1.333333rem;
      border-radius: 0.266667rem;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f5f5f5;
      .portrait_delete {
        width: 50%;
        height: 40%;
        border-radius: 0;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.266667rem;
        object-fit: cover;
      }
      .live_cartoon {
        width: 0.4rem;
        height: 0.4rem;
        position: absolute;
        right: 0;
        bottom: 0;
        background: red;
        border-radius: 0.053333rem;
      }
      .picture_href {
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        // transform: translate(-50%,-50%);
        // display: none;
        img {
          width: 20px;
          height: 20px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .list_introduce_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 0.266667rem;
      .list_introduce_top {
        width: 6.666667rem;
        font-size: 0.4rem;
        color: #222222;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        .info_top-img {
          width: 0.426667rem;
          height: 0.346667rem;
          vertical-align: inherit;
          margin-right: 0.08rem;
        }
      }
      .list_delete {
        width: 2.346667rem;
        height: 0.586667rem;
        line-height: 0.586667rem;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 0.106667rem;
        border: 1px solid #e5e5e5;
        font-size: 0.32rem;
        font-weight: 400;
        color: #888;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .list_introduce_time {
        font-size: 0.32rem;
        color: #888888;
        margin-top: 0.08rem;
      }
    }
  }
  .list_btm_box {
    display: flex;
    justify-content: space-around;
    margin-top: 0.36rem;
    .num {
      text-align: center;
      font-size: 0.4rem;
      color: #222222;
      font-family: Dinpro-medium;
    }
    .text {
      text-align: center;
      font-size: 0.32rem;
      color: #888888;
    }
  }
}
.tvd_more_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tvd_more_button {
    width: 2.133333rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
    margin-top: 0.666667rem;
  }
  .tvd_details {
    font-size: 0.32rem;
    color: #b5b5b5;
    margin-top: 0.4rem;
  }
}
.tvd_no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
.tvd_list_nodata {
  width: 100%;
  height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
</style>
